import React, { useState } from 'react';
function AudioControls(props) {
  let [volume, setVolume] = useState(50)
  let [bass, setBass] = useState(32)
  let [mid, setMid] = useState(25)
  let [treble, setTreble] = useState(17)
  return (
    <div>
      <div style={{display:'flex'}}>
        <button onClick={() => {
          setVolume(volume - 1);
          if (volume <= 0) {
            setVolume(0)
          }
        }}>-</button>
        <div style={{textAlign:'center'}}>
          <span>{volume}</span><br />
          <span>volume</span>
        </div> 
        <button onClick={() => {
          setVolume(volume + 1);
          if (volume >= 100) {
            setVolume(100)
          }
        }}>+</button>
      </div>
      <div style={{ display: 'flex' }}>
        <button onClick={() => {
          setBass(bass - 1);
          if (bass <= 0) {
            setBass(0)
          }
        }}>-</button>
        <div style={{ textAlign: 'center' }}>
          <span>{bass}</span><br />
          <span>bass</span>
        </div>
        <button onClick={() => {
          setBass(bass + 1);
          if (bass >= 100) {
            setBass(100)
          }
        }}>+</button>
      </div>
      <div style={{ display: 'flex' }}>
        <button onClick={() => {
          setMid(mid - 1);
          if (mid <= 0) {
            setMid(0)
          }
        }}>-</button>
        <div style={{ textAlign: 'center' }}>
          <span>{mid}</span><br />
          <span>mid</span>
        </div>
        <button onClick={() => {
          setMid(mid + 1);
          if (mid >= 100) {
            setMid(100)
          }
        }}>+</button>
      </div>
      <div style={{ display: 'flex' }}>
        <button onClick={() => {
          setTreble(treble - 1);
          if (treble <= 0) {
            setTreble(0)
          }
        }}>-</button>
        <div style={{ textAlign: 'center' }}>
          <span>{treble}</span><br />
          <span>treble</span>
        </div>
        <button onClick={() => {
          setTreble(treble + 1);
          if (treble >= 100) {
            setTreble(100)
          }
        }}>+</button>
      </div>
    </div>
  )
}
export default AudioControls;